<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <link rel="stylesheet" href="/res/plugin/materialize/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <style>
  .row{
    border: 1px #00B7FF solid;
  }
  .col{
    border: 1px #9ccc65 solid;
  }
</style>
</head>
<body>
<div class="wrapper-tags container">
  <div class="row" data-id="1">
    <div class="col s3 m1 l1 tag-handle"><i class="material-icons">open_with</i></div>
    <div class="col s4 m1 l1"><i class="material-icons">file_upload</i></div>
    <div class="col s4 m2 l2">
      <div>名称:</div>
    </div>
    <div class="col s8 m2 l2">
      <div>别名</div>
    </div>
    <div class="col s8 m5 l5">
      <div>内部链接</div>
    </div>
    <div class="col s3 l1 right-align"><i class="material-icons">clear</i></div>
  </div>
  <div class="row"  data-id="4">
    <div class="col s3 m1 l1"><i class="material-icons tag-handle">open_with</i><i class="material-icons">file_upload</i></div>
    <div class="col s4 m2 l3">
      <span class="truncate">名称:名称名称名称名称名称名称名称名称</span>
    </div>
    <div class="col s8 m2 l2">
      <span class="truncate">别名:</span>
    </div>
    <div class="col s8 m5 l3">
      <span class="truncate">链接</span>
    </div>

    <div class="col s8 m5 l3">
        <a class="waves-effect waves-light  btn">修改</a><a class="waves-effect waves-light  btn-floating"><i class="material-icons">clear</i></a>
    </div>
  </div>
  <div class="row" data-id="10">
    <div class="col s3 m1 l1 tag-handle"><i class="material-icons">open_with</i></div>
    <div class="col s4 m1 l1"><i class="material-icons">file_upload</i></div>
    <div class="col s4 m2 l2">名称3</div>
    <div class="col s8 m2 l2">别名</div>
    <div class="col s8 m5 l5">链接</div>
    <div class="col s3 l1 right-align"><i class="material-icons">clear</i></div>
  </div>
  <div class="row" data-id="6">
    <div class="col s3 m1 l1 tag-handle"><i class="material-icons">open_with</i></div>
    <div class="col s4 m1 l1"><i class="material-icons">file_upload</i></div>
    <div class="col s4 m2 l2">名称4</div>
    <div class="col s8 m2 l2">别名</div>
    <div class="col s8 m5 l5">链接</div>
    <div class="col s3 l1 right-align"><a class="waves-effect waves-light  btn">修改</a><a class="waves-effect waves-light  btn-floating"><i class="material-icons">clear</i></a></div>
  </div>
  <div class="row" data-id="5">
    <div class="col s3 m1 l1 tag-handle"><i class="material-icons">open_with</i></div>
    <div class="col s4 m1 l1"><i class="material-icons">file_upload</i></div>
    <div class="col s4 m2 l2">
      <div class="input-field inline">
        <input value="" type="text" class="validate">
        <label class="active">姓名</label>
      </div>
    </div>
    <div class="col s8 m2 l2">
      <div class="input-field inline">
        <input value="" type="text" class="validate">
        <label class="active">别名</label>
      </div>
    </div>
    <div class="col s8 m5 l5">
      <div>
        <input type="checkbox" id="indeterminate-checkbox" checked="checked" />
        <label for="indeterminate-checkbox">链接</label>
      </div>
      <div class="input-field inline">
        <input value="李四" type="text" class="validate">
        <label class="active"></label>
      </div>
    </div>
    <div class="col s3 l1 right-align"><i class="material-icons">clear</i></div>
  </div>
</div>

<script src="/res/plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="/res/plugin/materialize/js/materialize.min.js"></script>
<script src="/res/plugin/sortable/Sortable.min.js"></script>
<script>
$(function () {
  Sortable.create(document.querySelector('.wrapper-tags'), {
    sort: true,
    animation: 300,
    handle: '.tag-handle',
    dataIdAttr: 'data-id',
    onEnd: function (/**Event*/evt) {
      console.log(evt.oldIndex);
      console.log(evt.newIndex);
    },
    onAdd: function (/**Event*/evt) {
      var itemEl = evt.item;  // dragged HTMLElement
      console.log(itemEl);
      evt.from;  // previous list
      // + indexes from onEnd
    },
    onUpdate: function (/**Event*/evt) {
      var itemEl = evt.item;  // dragged HTMLElement
      // + indexes from onEnd
    },
    onRemove: function (evt) {
      
    },
  });
})
</script>
</body>
</html>